//1.引入Vue
import Vue from "vue";

//1.引入Vuex
import Vuex from "vuex";

import axios from "axios";

//引入数据持久化插件
import persistedstate from "vuex-persistedstate"

//3.使用插件
Vue.use(Vuex)


//(1).创建state保存数据
const state = {
    count: 1,
    price: 666,
    movieList: []
}

//(2).创建mutations处理同步修改数据
const mutations = {
    //因为要处理数据所以函数接收state !!!只有commit到mutaitions中才能修改数据

    //1.累加不传参
    increament(state){
        state.count++
    },

    //2.累加传参
    increamentN(state , { n }){
        state.count += n
    },

    //3.获取电影列表
    getMovieList(state  , result){
        state.movieList = result
    }
}

//(3)创建actions处理异步修改数据
const actions = {
    //actions不能修改数据 !!!只能让commit修改 所以形参接收对象解构出commit

    //1.等2秒累加不传参 只接受一个commit
    waitIncreament({ commit }){
        setTimeout(() => {
            //让commit修改修改数据
            commit("increament")
        }, 1500);
    },


    //2.等2秒累加传参 接收第二个参数是对象
    waitIncreamentN({ commit } , payload){
        setTimeout(() => {
            //让commit修改修改数据并传参
            commit("increamentN" , payload)
        }, 1500);
    },

    //3.发送ajax请求获取数据并修改state
    async getMovieListRequest({commit}){
        const result = await axios.get(
            "https://pcw-api.iqiyi.com/search/recommend/list?channel_id=1&data_type=1&mode=11&page_id=2&ret_num=48&session=b9fd987164f6aa47fad266f57dffaa6a"
        );
        //把数据给commit处理添加到state中
        commit("getMovieList" , result.data.data.list)
    },
}

//(4)创建getters对数据二次处理 类似计算属性
const getters = {
    //因为要处理数据所以接收state作为形参
    myMovieList(state){
        return state.movieList.filter((item) => {
            return item.albumName.length < 7 && item.albumName.length > 3
        })
    },

    //因为组件中的计算属性要传参所以当前getters返回一个函数 
    // 组件中的计算属性拿到函数传参并调用就得到想要的数据
    yourMovieList(state){
        //getters返回的函数
        return ({start , end}) => {
            //组件中的计算属性拿到函数并调用获取的返回值是一个数组
            return state.movieList.filter((item) => {
                return item.albumName.length <= end && item.albumName.length >= start
            })
        }
    }
}


//4.创建store对象 (Vuex的实例)
export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters,
    //使用数据持久化插件
    plugins: [persistedstate()]
})
